<template>
  <div>
    <el-card class="box-card">
      <mytitle :showLine="false">{{ $route.meta.title }}</mytitle>
      <div class="tab-top">
        <div></div>
        <div><el-button type="success" @click="editRow">批量配置</el-button><el-button type="success" plain
            @click="finCompeny">同步种植信息</el-button></div>
      </div>
      <el-table ref="singleTable" :header-cell-style="{ color: '#292B2B', background: '#EAF9F4' }" :data="tableData" border
        style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="plantId" label="果树编号" width="200" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="variety" label="品种名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="leaseState" label="租赁状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.leaseState == 0 ? 'success' : scope.row.leaseState == 1 ? 'warning' : 'danger'">{{ scope.row.leaseState == 0 ? '已租赁' : scope.row.leaseState == 1 ? '可租赁' : '未配置' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="landName" label="地块名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="operatorName" label="操作人" width="120" align="center">
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.disabled ? 'success' : 'danger'">{{ scope.row.disabled ? '启用中' : '禁用中' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="200" align="center">
        </el-table-column>
        <el-table-column prop="expirationTime" label="到期时间" width="200" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteRow(scope.row)" type="text">配置</el-button>
            <el-popconfirm :title="+scope.row.disabled ? '确定禁用?' : '确定启用?'" @confirm="disabled(scope.row)">
              <el-button slot="reference" type="text" style="margin: 0 20px;">{{ scope.row.disabled ? '禁用' : '启用' }}</el-button>
            </el-popconfirm>
            <el-button @click="checkQrd(scope.row)" type="text">生成果树码</el-button>
            <el-button @click="downQrd(scope.row)" type="text">下载果树码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="info.pageNum"
          :page-size="info.pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
      <el-dialog title="种植码" :visible.sync="dialogVisible" width="20%">
        <img class="qrdImg" :src="urlImg" alt="">
      </el-dialog>
      <el-dialog title="种植码" :visible.sync="showDig" width="20%" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item label="企业" style="width: 320px;" prop="companyIdS">
            <el-select v-model="ruleForm.companyIdS" multiple collapse-tags @change="companyChange"
              placeholder="请选择企业">
              <el-option label="全选" value="全选" v-if="ruleForm.companyIdS.length!=optionCompney.length" />
              <el-option v-for="item in optionCompney" :key="item.companyId" :label="item.abbreviation" :value="item.companyId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="基地" style="width: 320px;" prop="baseIdS">
            <el-select v-model="ruleForm.baseIdS" multiple collapse-tags @change="baseChange"
              :disabled="ruleForm.companyIdS.length==0"
              placeholder="请选择基地">
              <el-option label="全选" value="全选" v-if="ruleForm.baseIdS.length!=optionBase.length" />
              <el-option v-for="item in optionBase" :key="item.baseSoilId" :label="item.baseSoilName" :value="item.baseSoilId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地块" style="width: 320px;" prop="landIdS">
            <el-select v-model="ruleForm.landIdS" multiple collapse-tags @change="landChange"
              placeholder="请选择地块"  :disabled="ruleForm.baseIdS.length==0">
              <el-option label="全选" value="全选" v-if="ruleForm.landIdS.length!=optionLand.length"  />
              <el-option v-for="item in optionLand" :key="item.value" :label="item.baseSoilName" :value="item.baseSoilId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="批次" style="width: 320px;" prop="beach">
            <el-select v-model="ruleForm.beach" multiple collapse-tags placeholder="请选择批次" @change="beachChange"  :disabled="ruleForm.landIdS.length==0">
              <el-option label="全选" value="全选" v-if="ruleForm.beach.length!=optionBeach.length"  />
              <el-option v-for="item in optionBeach" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
              <el-button @click="showDig=false" type="success" plain>取消</el-button>
              <el-button @click="submitForm('ruleForm')" type="success">确认配置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-card>
  </div>
</template>
<script>
import { findAllLands, compileLandMsg, generateLandQrcode,findAllCompany,findAllBaseSoilByCompanyId,findAllBatchNumber,synchronizationPlantInfo } from '../util/api.js'
export default {
  data() {
    return {
      info: {
        pageNum: 1,
        pageSize: 6
      },
      loading:false,
      optionBase:[],
      optionBeach:[],
      optionLand:[],
      optionCompney:[],
      ruleForm:{
        baseIdS:[],
        landIdS:[],
        companyIdS:[],
        beach:[]
      },
      
      rules: {
               baseIdS: [
                    { required: true, message: '请选择基地', trigger: 'change' },
                ],
                landIdS: [
                    { required: true, message: '请选择地块', trigger: 'change' },
                ],
                companyIdS: [
                    { required: true, message: '请选择公司', trigger: 'change' }
                ],
                beach: [
                    { required: true, message: '请选择批次', trigger: 'change' }
                ],
      },
      showDig: false,
      dialogVisible: false,
      urlImg: "",
      total: 0,
      tableData: [],
    }
  },
  mounted() {
    this.getLands()
  },
  methods: {
    async getLands() {
      let res = await findAllLands(this.info)
      // console.log(res)
      if (res.code != 200) return
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    handleCurrentChange(val) {
      this.info.pageNum = val
      this.getLands()
      // console.log(`当前页: ${val}`);
    },
   async finCompeny(){
      this.showDig = !this.showDig
      let res = await findAllCompany()
      // console.log(res) 
      if(res.code!=200)return
      this.optionCompney = res.data
    },
    async finbases(){
      let res = await findAllBaseSoilByCompanyId({companyIdS:this.ruleForm.companyIdS})
      // console.log(res) 
      if(res.code!=200)return
      this.optionBase =res.data   
    },
    async finlands(){
      let res = await findAllBaseSoilByCompanyId({baseIdS:this.ruleForm.baseIdS})
      // console.log(res) 
      if(res.code!=200)return
      this.optionLand = res.data  
    },
    async finbeachs(){
      let res = await findAllBatchNumber(this.ruleForm.landIdS)
      // console.log(res) 
      if(res.code!=200)return
      this.optionBeach = res.data  
    },
    
    //公司筛选
    companyChange(e){
      if(e[e.length-1]=="全选")this.ruleForm.companyIdS=this.optionCompney.map(v=>v.companyId)
      this.finbases()
    },
     //基地筛选
    baseChange(e){
      if(e[e.length-1]=="全选")this.ruleForm.baseIdS=this.optionBase.map(v=>v.baseSoilId) 
      this.finlands()
    },
     //地块筛选
    landChange(e){
      if(e[e.length-1]=="全选")this.ruleForm.landIdS=this.optionLand.map(v=>v.baseSoilId) 
      this.finbeachs()
    },
    //批次全选
    beachChange(e){
      if(e[e.length-1]=="全选")this.ruleForm.beach=this.optionBeach 
    },
    //禁用 启用
    async disabled(row) {
      let data = {
        sign: 2,
        landId: row.landId,
        disabled: row.disabled ? 0 : 1
      }
      let res = await compileLandMsg(data)
      // console.log(res)
      if (res.code != 200) return
      row.disabled = data.disabled
    },
    //生成地块码
    async checkQrd(row) {
      let res = await generateLandQrcode({ plantId: row.plantId })
      // console.log(res)
      if (!res) return this.$message.error('生成错误！')
      this.urlImg = URL.createObjectURL(res)
      this.dialogVisible = true
    },
    //下载地块码
    async downQrd(row) {
      let res = await generateLandQrcode({ plantId: row.plantId })
      // console.log(res)
      if (!res) return this.$message.error('生成错误！')
      let link = document.createElement('a')
      link.download = row.landName + "地块码.png";
      link.style.display = 'none';
      link.href = URL.createObjectURL(res);
      link.click()
      window.URL.revokeObjectURL(link.href)
    },
    deleteRow(row) {
      this.$router.push({
        path: '/landManagement/config',
        query: {
          row: JSON.stringify(row),
        }
      })
    },
    submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    let res = await synchronizationPlantInfo(this.ruleForm.beach)
                    if (res.code != 200) return this.loading = false
                    this.$message.success('同步成功！')
                    this.getLands()
                    this.showDig = false
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
    editRow() {
      this.$router.push({ path: '/landManagement/config' })
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
  margin: 14px 0;
  .qrdImg {
    width: 100%;
    height: 100%;
  }
}
</style>